<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="js/jquery.js"></script>
    <script src="js/poper.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        .btn-yellow {
        color: black;
        background-color: #fdeb8c;
        border-color: #fdeb8c;
        font-weight: bold;
        transition: 0.5s;
      }
      .row{
        flex-wrap: nowrap;
      }
      .col{
        width: 50vw;
        flex:none;
        height: calc(100vh - 72px);
        padding: 0;
      }
    </style>
  </head>
  <body>
    <main class="row w-100 overflow-hidden align-items-center">
      <div class="col login py-5">
        <a href="./home.html"><img src="./img/logo.png" style="cursor: pointer;" class="d-block mx-auto" alt=""></a>
        <h2 align="center" class="font-weight-bold">
            Log in to your account
        </h2>
        <div class="alert alert-success alert-dismissible position-absolute w-100 fade show text-center">
          <button type="button" class="close">&times;</button>
          <strong >Login successful ,Jump to homepage in 2 seconds</strong>
        </div>
        <div class="alert alert-danger alert-dismissible position-absolute w-100 fade show text-center">
          <button type="button" class="close">&times;</button>
          <strong>Incorrect username or password</strong>
        </div>
        <form action="" class="my-5 bg-light p-5" id="login_form">
            <div class="form-group my-4 row">
                <label for="" class="col-3 my-auto" align="right">Username:</label>
                <input autocomplete="off" value="1390884256" type="text" name="username" required class="form-control col-7" placeholder="Enter your username, tip:phone number">
            </div>
            <div class="form-group my-4 row">
                <label for="" class="col-3 my-auto" align="right">Password:</label>
                <input autocomplete="off" value="123456" type="password" name="password"  required class="form-control col-7" placeholder="Enter your password">
            </div>
            <button class="btn btn-yellow w-100 my-3 loginBtn" type="button">Login In</button>
            <a href="javascript:void(0)" class="text-decoration-none tosign">No account? Go register</a>
        </form>
      </div>
      <div class="col intro" style="background-color: #409EE6;">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="card py-5">
                <img src="./img/1.webp" width="500" alt="">
                <h2 class="card-title" align="center">
                    Pass these on to others
                </h2>
                <h5 class="text-center font-weight-light">
                    Affect everything to others
                </h5>
            </div>
        </div>
      </div>
      <div class="col sign py-5">
        <a href="./home.html"><img src="./img/logo.png" style="cursor: pointer;" class="d-block mx-auto" alt=""></a>
        <h2 align="center" class="font-weight-bold">
            Registered Account
        </h2>
        <div class="alert alert-success alert-dismissible position-absolute w-100 fade show text-center">
          <button type="button" class="close">&times;</button>
          <strong >Sign successful,go login</strong>
        </div>
        <div class="alert alert-warning alert-dismissible position-absolute w-100 fade show text-center">
          <button type="button" class="close">&times;</button>
          <strong >Incorrect username or password format</strong>
        </div>
        <div class="alert alert-danger alert-dismissible position-absolute w-100 fade show text-center">
          <button type="button" class="close">&times;</button>
          <strong>The username has been registered</strong>
        </div>
        <form action="" class="my-5 bg-light p-5" id="sign_form">
            <div class="form-group my-4 row">
                <label for="" class="col-3 my-auto" align="right">Username:</label>
                <input autocomplete="off" type="text" name="username" required class="form-control col-7" placeholder="Enter your username, tip:phone number">
            </div>
            <div class="form-group my-4 row">
                <label for="" class="col-3 my-auto" align="right">Password:</label>
                <input autocomplete="off" type="password" name="password"  required class="form-control col-7" placeholder="Enter your password">
            </div>
            <div class="form-group my-4 row">
                <label for="" class="col-3 my-auto" align="right">Repassword:</label>
                <input autocomplete="off" type="password" name="repassword"  required class="form-control col-7" placeholder="Enter your password">
            </div>
            <button class="btn btn-yellow w-100 my-3 signBtn" type="button">Sign Up</button>
            <a href="javascript:void(0)" class="text-decoration-none tologin">Do you have an account? Go log in</a>
        </form>
 
      </div>
    </main>
    <footer class="bg-dark text-center py-4 text-white ">
        © 2023 Climeworks
  Terms of Use
  Privacy notice
      </footer>
      <script>
        $('.alert').hide()
        $('.tosign').on('click',() => {
          $('.col').animate({left:-$('.login').width()})
          $('#login_form')[0].reset()
        })
        $('.tologin').on('click',() => {
          $('.col').animate({left:0})
          $('#sign_form')[0].reset()
        })
        $('.close').on('click',function(){
          $(this).parent().slideUp(300)
        })
        $('.loginBtn').on('click',() => {
          if(!(/^\d{6,20}$/.test($('#login_form [name=username]').val()) && /^\w{6,20}$/.test($('#login_form [name=password]').val()))) return $('.login .alert-danger').slideDown(300)
          $('.alert').slideUp(300)
          $.post('./php/login_serve.php',{username:$('#login_form [name=username]').val(),password:$('#login_form [name=password]').val()},res => {
            if(res.code === 200) {
              $('.login .alert-success').slideDown(300)
              localStorage.setItem('username',$('#login_form [name=username]').val())
              setTimeout(() => {window.location.href = './home.html'},2000)
            }else $('.login .alert-danger').slideDown(300)
          })
        })
        $('.signBtn').on('click',() => {
          if(!($('#sign_form [name=password]').val() === $('#sign_form [name=repassword]').val() && /^\d{6,20}$/.test($('#sign_form [name=username]').val()) && /^\w{6,20}$/.test($('#sign_form [name=password]').val()))) return $('.sign .alert-warning').slideDown(300)
          $('.alert').slideUp(300)
          $.post('./php/sign_serve.php',{username:$('#sign_form [name=username]').val(),password:$('#sign_form [name=password]').val()},res => {
            if(res.code === 200) $('.sign .alert-success').slideDown(300)
            else $('.sign .alert-danger').slideDown(300)
          })
        })
      </script>
  </body>
</html>
